<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import point from '@/components/point.vue'
import { getGetPatient } from '@/apis/apis.js'
import { usePatientStore } from '@/store/index.js'
const patientList = ref([])
const patientStore = usePatientStore()
const handleCancel = () => {
  uni.navigateBack()
}
const handleAdd = () => {
  uni.navigateTo({ url: '/pages/my-service/my-patient/add-patient' })
}
const handleChoose = (item, index) => {
  patientStore.updatePatientId(item._id)
  patientStore.updatePatientName(item.name)
  uni.navigateBack()
}
onShow(async () => {
  const res = await getGetPatient()
  patientList.value = res.data
})
</script>

<template>
  <view class="view">
    <view class="view-body">
      <view class="view-body-item" v-for="(item, index) in patientList" :key="index" @click="handleChoose(item, index)">
        <view class="view-body-item-top">
          <view class="view-body-item-top-name">{{ item.name }}</view>
          <view class="view-body-item-top-tag">{{ item.relation }}</view>
        </view>
        <view class="view-body-item-bottom">{{ item.sex }} {{ item.age }}岁 {{ item.phone }}</view>
      </view>
      <point text="你还没有就诊人数据" v-if="patientList.length <= 0" />
    </view>
    <view class="view-footer">
      <view class="view-footer-cancel" @click="handleCancel">取消</view>
      <view class="view-footer-submit" @click="handleAdd">添加就诊人</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  min-height: 100vh;
  background-color: #f8f8f8;
  .view-body {
    padding-top: 20rpx;
    .view-body-item {
      margin: 0 20rpx 20rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
      .view-body-item-top {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        .view-body-item-top-name {
          margin-right: 20rpx;
          font-weight: bold;
          font-size: 36rpx;
        }
        .view-body-item-top-tag {
          padding: 5rpx 20rpx;
          background-color: rgba($color: #4376e4, $alpha: 0.4);
          color: #4376e4;
          font-size: 28rpx;
        }
      }
      .view-body-item-bottom {
        color: #aaaaaa;
        font-size: 28rpx;
      }
    }
  }
  .view-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    width: 750rpx;
    background-color: #fff;
    .view-footer-cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      width: 325rpx;
      background-color: #ecf3fe;
      border-radius: 10rpx;
      color: #4376e4;
    }
    .view-footer-submit {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      width: 325rpx;
      background-color: #4376e4;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
